<template>

	<hr class="two" />

	<h2>==== ShallowReadOnly 限制只读 ===</h2>

	<h4>当前求和为：{{ sum }}</h4>
	<button @click="sum++">点我++</button>
	<hr>
	<h2>姓名：{{ name }}</h2>
	<h2>年龄：{{ age }}</h2>
	<h2>薪资：{{ job.j1.salary }}K</h2>
	<button @click="name+='~'">修改姓名</button>
	<button @click="age++">增长年龄</button>
	<button @click="job.j1.salary++">涨薪</button>
</template>

<script>
import {ref, reactive, toRefs, readonly, shallowReadonly} from 'vue'

export default {
	name: 'ShallowReadOnly',
	setup() {
		//数据
		let sum = ref(0)
		let person = reactive({
			name: '张三',
			age: 18,
			job: {
				j1: {
					salary: 20
				}
			}
		})

		person = readonly(person) //接收响应式数据 之后不允许修改
		// person = shallowReadonly(person)
		// sum = readonly(sum)
		// sum = shallowReadonly(sum)

		//返回一个对象（常用）
		return {
			sum,// 普通响应式数据
			...toRefs(person) // 不允许修改
		}
	}
}
</script>

